<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="110px"
    style="overflow-x: hidden;"
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="条码">
          <el-input v-model="formData.barCode" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="名称">
          <el-input v-model="formData.name" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="规格">
          <el-input v-model="formData.standard" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位">
          <el-input v-model="formData.unitName" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="医保编码">
          <el-input v-model="formData.medicalInsurCode" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="生产厂家">
          <el-input v-model="formData.manufacturer" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="采购价格" prop="purchasePrice">
          <el-input-number
            v-model="formData.purchasePrice"
            placeholder="请输入采购价格，单位：元"
            :min="0"
            :precision="2"
            class="!w-full"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <template #footer>
    <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>
  </template>
</Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ProductApi } from '@/api/spd/product/product'
const { t } = useI18n() // 国际化

const message = useMessage()

// 弹窗控制
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formType = ref('') // adjustPrice
const formLoading = ref(false)

// 表单数据
const formData = ref({
  id: undefined,
  barCode: undefined,
  name: undefined,
  categoryName: undefined,
  unitName: undefined,
  manufacturer: undefined,
  purchasePrice: undefined
})

// 表单校验规则
const formRules = reactive({
  purchasePrice: [{ required: true, message: '采购价格不能为空', trigger: 'blur' }]
})

const formRef = ref() // 表单 Ref

// 打开弹窗方法
const open = async (type: string, dataId?: number) => {
  dialogVisible.value = true
  dialogTitle.value = '调价'
  formType.value = type

  if (dataId) {
    formLoading.value = true
    try {
      const product = await ProductApi.getProduct(dataId)
      formData.value = product
    } finally {
      formLoading.value = false
    }
  }
}

defineExpose({ open }) // 提供 open 方法给父组件调用

// 提交事件
const emit = defineEmits(['success'])

const submitForm = async () => {
  await formRef.value.validate()
  formLoading.value = true
  try {
    await ProductApi.updateProductPrice(formData.value.dataId,formData.value.purchasePrice)
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>